<div class="p-4 relative">
  <h1 class="text-orange-400 mb-2" [ngClass]="[h1class || 'text-5xl', none]"><span class="leading-tight" [id]="dataid" [ngClass]="{'hidden': !count}">0</span>
    <ng-content>%</ng-content>
  </h1>
  <h5 class="text-neutral-800 mb-3 mt-4 leading-snug" [ngClass]="h5class || 'text-xl'">
    <ng-content select="h5"></ng-content>
  </h5>
  <div [ngClass]="[left ? 'grid grid-cols-12' : '', grid]">
    <p class="text-neutral-500 font-normal mb-4 leading-normal" [ngClass]="[pclass || 'text-base', left || ''] ">
      <ng-content select="p"></ng-content>
    </p>
    <div [class]="right || ''">
      <ng-content select="img"></ng-content>
    </div>
  </div>
  <ng-content select=".other-part1"></ng-content>
  <hr *ngIf="showhr" class="hidden lg:block absolute bg-transparent h-full w-[1px] right-0 top-0 opacity-[.25]"
      style="background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4), transparent);">
</div>
